<template>
  <div id="Video">
    <div>
      <p class="type_title">
        <span>视频介绍</span>
      </p>
      <div class="pic_img">
        <div class="pic_img_box">
          <el-upload
            class="avatar-uploader"
            action="上传地址"
            :data="{ FoldPath: '上传目录', SecretKey: '安全验证' }"
            :on-progress="uploadVideoProcess"
            :on-success="handleVideoSuccess"
            :before-upload="beforeUploadVideo"
            :show-file-list="false"
          >
            <video
              v-if="showVideoPath != '' && !videoFlag"
              v-bind:src="showVideoPath"
              class="avatar video-avatar"
              controls="controls"
            >
              您的浏览器不支持视频播放
            </video>
            <i
              v-else-if="showVideoPath === '' && !videoFlag"
              class='el-icon-plus avatar-uploader-icon'
            ></i>
            <el-progress
              v-if='videoFlag == true'
              type="circle"
              :percentage="videoUploadPercent"
              style='margin-top: 7px'
            ></el-progress>
          </el-upload>
        </div>
      </div>
    </div>
    <p class='Upload_pictures'>
      <span></span>
      <span>最多可以上传1个视频，建议大小50M，推荐格式mp4</span>
    </p>
  </div>
</template>

<script>
export default {
  name: 'Video',
  data: {
    videoFlag: false,
    // 是否显示进度条
    videoUploadPercent: '',
    // 进度条的进度，
    isShowUploadVideo: false,
    // 显示上传按钮
    showVideoPath: ''
  },
  methods: {
    // 上传前回调
    beforeUploadVideo (file) {
      var fileSize = file.size / 1024 / 1024 < 50
      if (
        [
          'video/mp4',
          'video/ogg',
          'video/flv',
          'video/avi',
          'video/wmv',
          'video/rmvb',
          'video/mov'
        ].indexOf(file.type) === -1
      ) {
        this.$Message.msg('请上传正确的视频格式')
        return false
      }
      if (!fileSize) {
        this.$Message.msg('视频大小不能超过50MB')
        return false
      }
      this.isShowUploadVideo = false
    },
    // 进度条
    uploadVideoProcess (event, file, fileList) {
      this.videoFlag = true
      this.videoUploadPercent = file.percentage.toFixed(0) * 1
    },
    // 上传成功回调
    handleVideoSuccess (res, file) {
      this.isShowUploadVideo = true
      this.videoFlag = false
      this.videoUploadPercent = 0

      // 前台上传地址
      if (file.status === 'success') {
        this.videoForm.showVideoPath = file.url
      } else {
        this.$Message.msg('上传失败，请重新上传')
      }

      // 后台上传地址
      if (res.Code === 0) {
        this.videoForm.showVideoPath = res.Data
      } else {
        this.$Message.msg(res.Message)
      }
    }
  }
}
</script>

<style lang='less' scoped>
#Video {
  width: 100%
  // width: 100%
  // height: 100%
  // background: #fff
  // padding-left: 24px
  // border-bottom: 1px solid #ebebeb
  // .upload-demo{
  //   width: 100%
  //   /deep/ .el-upload, .el-upload--text{
  //     width: 100%
  //   }
  //   .el-upload-dragger{
  //     width: 100%
  //   }
  // }
}
</style>